<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>学生信息</title>
    <script src="js/jquery-3.4.1.min.js"></script>

</head>
<body>


<div align="center">
<form action="StudentsServlet" id="searchForm">
    <input type="hidden" name="pageNo" value="${pageNo}">
    <input type="text" name="sname" placeholder="姓名" value="${sname}"/>
    <input type="text" name="qq" placeholder="qq号" value="${qq}"/>
    <input type="text" name="telephone" placeholder="手机号" value="${telephone}"/>
    <input type="submit" id="search"/>
    <a href="toAddStudent">新生注册</a>
</form>
</div>
<table border="1" align="center" cellpadding="0" cellspacing="0">
    <tr bgcolor="#a9a9a9">
        <th>学号</th>
        <th>姓名</th>
        <th>手机号</th>
        <th>QQ</th>
        <th>性别</th>
        <th>入学时间</th>
        <th>邮件</th>
        <th>操作 </th>
    </tr>

    <c:forEach items="${paging.datas}" var="s" varStatus="sv">
    <tr <c:if test="${sv.count%2==0}"> style="background-color:gray;"</c:if> >

        <td>${s.stuno}</td>
        <td>${s.sname}</td>
        <td>${s.telephone}</td>
        <td>${s.qq}</td>
        <td>${s.sex}</td>
        <td><fmt:formatDate value="${s.enterdate}" pattern="yyyy年MM月dd日"/> </td>
        <td>${s.email}</td>
        <td><a href="showStudentServlet?stuno=${s.stuno}">详情</a>&nbsp;<a href="toUpdateStudent.jsp?stuno=${s.stuno}">修改</a>&nbsp;<a href="delStudent.jsp?stuno=${s.stuno}" onclick="return confirm('您确定要删除嘛？')">删除</a>&nbsp; </td>
    </tr>
    </c:forEach>
</table>
<p align="center" id="page">
    <a href="#" id="first">首页</a>

    <c:if test="${pageNo>1}">
    <a href="#" id="prev">上一页</a>
    </c:if>
    <input type="number" min="1" value="${paging.pageNo}" style="width: 60px">
    <input type="button" value="GO" id="go" style="width: 50px"/>

    <c:if test="${pageNo<paging.totalPages}">
    <a href="#" id="next">下一页</a>
    </c:if>
    <a href="#" id="last"> 尾页</a>
</p>

<script>
    $(function () {
        $("#search").click(function () {
            $("#searchForm [name=pageNo]").val(1);
            return true;
        });
        $("#go").click(function () {
            var p=$(this).prev().val();
            if(p<=1)p=1;
            //window.location.href="students.jsp?pageNo="+p;
            $("#searchForm [name=pageNo]").val(p);
            $("#searchForm").submit();
            return false;
        });
        var pageNo=${pageNo};
        $("#page a#first").click(function () {
            $("#searchForm [name=pageNo]").val(1);
            $("#searchForm").submit();
            return false;//链接失效
        });
        $("#page a#prev").click(function () {
            $("#searchForm [name=pageNo]").val(--pageNo);
            $("#searchForm").submit();
            return false;//链接失效
        });
        $("#page a#next").click(function () {
            $("#searchForm [name=pageNo]").val(++pageNo);
            $("#searchForm").submit();
            return false;//链接失效
        });
        $("#page a#last").click(function () {
            pageNo=${paging.totalPages};
            $("#searchForm [name=pageNo]").val(pageNo);
            $("#searchForm").submit();
            return false;//链接失效
        });
    });
</script>
</body>
</html>
